<template>
  <ScalablePage>
    <!-- 送水泵房  ssbf -->
    <div class="left">
      <h1><img src="../assets/psj/jcsj.png" style="width:100%" /></h1>
      <h2><img src="../assets/psj/cdct2.png" style="margin-top: 6px" /></h2>
      <div class="psj-con">
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.z1 }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">1#总管压力</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.z2 }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">2#总管压力</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.s }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">苏银产业园流量</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.y }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">月牙湖人饮流量</p>
          </div>
        </div>

        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.s1 }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">上海庙1流量</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.s2 }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">上海庙2流量</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.zy }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">技术用水流量</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.lh }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">绿化水流量</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.c1 }} <span class="pjs-sub">m³/h</span></div>
            <p class="psj-p">出厂水浊度</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ psj.c2 }} <span class="pjs-sub">mg/L</span></div>
            <p class="psj-p">出厂水余氯</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ chushui }}<span class="pjs-sub"> m<sup>3</sup>/h</span></div>
            <p class="psj-p">送水泵房瞬时流量总和</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ clearWater1 }}<span class="pjs-sub"> m</span></div>
            <p class="psj-p">1#清水池液位</p>
          </div>
        </div>
        <div class="pjs-item">
          <img src="../assets/psj/icon.png" alt="" />
          <div>
            <div class="psj-t">{{ clearWater1 }}<span class="pjs-sub"> m</span></div>
            <p class="psj-p">2#清水池液位</p>
          </div>
        </div>
      </div>
      <div class="pjs-item">
        <img src="../assets/psj/icon.png" alt="" />
        <div>
          <div class="psj-t">
            <div
              style="display: flex; align-items: baseline; justify-content: flex-start; width: 100%; column-gap: 20px;">
              <span style="display: block;">
                1# <span class="pjs-sub" :style="{ color: runState.numOne == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numOne }}</span>
              </span>
              <span>
                2# <span class="pjs-sub" :style="{ color: runState.numTwo == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numTwo }}</span>
              </span>
              <span>
                3# <span class="pjs-sub" :style="{ color: runState.numThree == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numThree }}</span>
              </span>
              <span>
                4# <span class="pjs-sub" :style="{ color: runState.numFour == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numFour }}</span>
              </span>
            </div>

            <div
              style="display: flex; align-items: baseline; justify-content: flex-start; width: 100%; column-gap: 20px;">
              <span>
                5# <span class="pjs-sub" :style="{ color: runState.numFive == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numFive }}</span>
              </span>
              <span>
                6# <span class="pjs-sub" :style="{ color: runState.numSix == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numSix }}</span>
              </span>
              <span>
                7# <span class="pjs-sub" :style="{ color: runState.numSeven == '运行中' ? 'rgb(0 255 186)' : 'rgb(199 53 3)' }">{{ runState.numSeven }}</span>
              </span>
            </div>

          </div>
          <p class="psj-p">1#-7#泵组运行状态</p>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import { ref, onMounted, reactive, toRefs } from "vue";
import { waterApi } from "@/utils/shuiwu/api";

const state = reactive({
  psj: {
    z1: 0,
    z2: 0,
    s: 0,
    y: 0,
    s1: 0,
    s2: 0,
    zy: 0,
    lh: 0,
    c1: 0,
    c2: 0,
  },
});

const clearWater1 = ref(0);
const clearWater2 = ref(0);
const chushui = ref(0);


const runState = reactive({
  numOne: '',
  numTwo: '',
  numThree: '',
  numFour: '',
  numFive: '',
  numSix: '',
  numSeven: '',
});

let { psj } = toRefs(state);
onMounted(() => {
  getPsj(642);
});

function getPsj(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let totalnum = 0;
    for (let i = 0; i < arr.length; i++) {
      if (
        arr[i].modelId == 4631 ||
        arr[i].modelId == 4633 ||
        arr[i].modelId == 4634 ||
        arr[i].modelId == 4636 ||
        arr[i].modelId == 4637 ||
        arr[i].modelId == 4638 ||
        arr[i].modelId == 4639 ||
        arr[i].modelId == 4640
      ) {
        totalnum += Number(arr[i].value);
      }



      if (arr[i].modelId == 4645) {
        clearWater1.value =  Number(arr[i].value) || 0;
      }
      if (arr[i].modelId == 4647) {
        clearWater2.value =  Number(arr[i].value) || 0;
      }
      if (arr[i].modelId == 4645) {
        state.psj.z1 = Number(arr[i].value);
      }
      if (arr[i].modelId == 4647) {
        state.psj.z2 = Number(arr[i].value);
      }
      if (arr[i].modelId == 4634) {
        state.psj.s = Number(arr[i].value);
      }
      if (arr[i].modelId == 4633) {
        state.psj.y = Number(arr[i].value);
      }
      if (arr[i].modelId == 4637) {
        state.psj.s1 = Number(arr[i].value);
      }
      if (arr[i].modelId == 4636) {
        state.psj.s2 = Number(arr[i].value);
      }

      if (arr[i].modelId == 4631) {
        state.psj.zy = Number(arr[i].value);
      }
      if (arr[i].modelId == 4628) {
        state.psj.lh = Number(arr[i].value);
      }
      if (arr[i].modelId == 4641) {
        state.psj.c1 = Number(arr[i].value);
      }
      if (arr[i].modelId == 4642) {
        state.psj.c2 = Number(arr[i].value);
      }
      /**
       * 1-7号泵组运行状态
       * F1_YX58
       */
      if (arr[i].identifier === 'F1_YX96') {
        runState.numOne = arr[i].value === '1' ? '运行中' : '停止';
      }
      if (arr[i].identifier === 'F1_YX58') {
        runState.numTwo = arr[i].value === '1' ? '运行中' : '停止';
      }
      if (arr[i].identifier === 'F1_YX112') {
        runState.numThree = arr[i].value === '1' ? '运行中' : '停止';
      }
      if (arr[i].identifier === 'F1_YX120') {
        runState.numFour = arr[i].value === '1' ? '运行中' : '停止';
      }
      if (arr[i].identifier === 'F1_YX175') {
        runState.numFive = arr[i].value === '1' ? '运行中' : '停止';
      }
      if (arr[i].identifier === 'F1_YX62') {
        runState.numSix = arr[i].value === '1' ? '运行中' : '停止';
      }
      if (arr[i].identifier === 'F1_YX191') {
        runState.numSeven = arr[i].value === '1' ? '运行中' : '停止';
      }
    }
    chushui.value = totalnum;
  });
}
</script>
<style scoped></style>
